!!! 5
%html
  %body
    .span15
      .row
        .container
          .col-md-12
            .form-group.text-right
              %label.control-label{for: ''} Customer:
              .btn-group
                .btn.btn-default.dropdown-toggle{"data-toggle" => 'dropdown'}
                  - if @customer_id.nil?
                    All Time
                  - else
                    #{@customers.name}
                  %span.caret
                %ul.dropdown-menu.dropdown-menu-right
                  %li
                    %a{href: '/analytics'} All
                  %li.divider{role: 'separator'}
                  - @button_select_customers.each do |customer|
                    %li
                      %a{href: "/analytics?customer_id=#{customer.id}"} #{customer.name}
              - if @customer_id
                &nbsp
                %label.control-label.text-right{for: ''} Hash File:
                .btn.btn-default.dropdown-toggle{"data-toggle" => 'dropdown'}
                  - if !params[:hashfile_id]
                    All Hashes
                  - else
                    #{@hashfiles[:name]}
                  %span.caret
                %ul.dropdown-menu.dropdown-menu-right
                  %li
                    %a{href: "/analytics?customer_id=#{@customer_id}"} All Hashes
                  %li.divider{role: 'separator'}
                  - @button_select_hashfiles.each do |hashfile|
                    %li
                      %a{href: "/analytics?customer_id=#{@customer_id}&hashfile_id=#{hashfile.id}"} #{hashfile.name}
                &nbsp
          .col-md-12
            .page-header
              %h1
                Password Analysis:
                - if @customer_id.nil?
                  All Customers
                - else
                  #{@customers.name}
                .col-md-2.pull-right
      .container
        .row
          .col-md-6
            - if !@cracked_pw_count && !@uncracked_pw_count #@cracked_results.nil?
              No results for this job. Perhaps it was never started?
            - else
              .panel.panel-default
                .panel-heading
                  %b Total Hashes Cracked
                .panel-body
                  %br
                  %div{id: 'chart1', style: 'text-align:center'}
                  //cred to http://jsfiddle.net/ragingsquirrel3/qkHK6 for this
                  :plain
                    <script src= '/js/d3.min.js'></script>
                    <script type= "text/javascript">
                      var data = [{"label":"Cracked", "value":"#{@cracked_pw_count}"},
                        {"label":"Uncracked", "value":"#{@uncracked_pw_count}"}];
                      var w = 200;
                      var h = 200;
                      var r = h/2;
                      var iw = 50;

                      //d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
                      var color = d3.scaleOrdinal()
                        .range(['#d9534f', '#5cb85c']);  //'#FFBF00', '#0000FF', '#008C00']);
                      var visual1 = d3.select('#chart1').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
                      var pie = d3.pie().value(function(d){return d.value;});
                      var arc = d3.arc().innerRadius(r - iw).outerRadius(r);

                      var arcs = visual1.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");


                      arcs.append("svg:path")
                        .attr("fill", function(d, i){
                          return color(i);
                          })
                        .attr("stroke-width", 2.0)
                        .attr("d", function (d) {
                          console.log(arc(d));
                          return arc(d);
                        });
                      arcs.append("svg:text").attr("transform", function(d){
                        d.innerRadius = 0;
                        d.outerRadius = r;
                        return "translate(" + arc.centroid(d) + ")";});

                      var legend = d3.select("#chart1").append("svg")
                        .attr("class", "legend")
                        .attr("width", r * 2)
                        .attr("height", r * 2)
                        .selectAll("g")
                        .data(color.domain().slice())
                        .enter().append("g")
                        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

                      legend.append("rect")
                        .attr("width", 18)
                        .attr("height", 18)
                        .style("fill", color);

                      legend.append("text")
                        .attr("x", 24)
                        .attr("y", 9)
                        .attr("dy", ".35em")
                        .style("font-family","Calibri")
                        .text(function( d,i ) {return data[i].label +": " + data[i].value })
                        .style("font-size","px");
                    </script>
                  %br
          .col-md-6
            - if !@cracked_pw_count && !@uncracked_pw_count #@cracked_results.nil?
              No results for this job. Perhaps it was never started?
            - else
              .panel.panel-default
                .panel-heading
                  %b Composition Breakdown
                .panel-body
                  %br
                  %div{id:  "chart2", :style => 'text-align:center'}
                  //cred to http://jsfiddle.net/ragingsquirrel3/qkHK6 for this
                  :plain
                    <script src= '/js/d3.min.js'></script>
                    <script type= "text/javascript">
                      var data = [{"label":"Fails Complexity", "value":"#{@fails_complexity_count}"},
                        {"label":"Meets Complexity", "value":"#{@meets_complexity_count}"}];
                      var w = 200;
                      var h = 200;
                      var r = h/2;
                      var iw = 50;

                      //d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
                      var color = d3.scaleOrdinal()
                        .range(['#d9534f', '#5cb85c']);  //'#FFBF00', '#0000FF', '#008C00']);
                      var visual1 = d3.select('#chart2').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
                      var pie = d3.pie().value(function(d){return d.value;});
                      var arc = d3.arc().innerRadius(r - iw).outerRadius(r);

                      var arcs = visual1.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");


                      arcs.append("svg:path")
                        .attr("fill", function(d, i){
                          return color(i);
                          })
                        .attr("stroke-width", 2.0)
                        .attr("d", function (d) {
                          console.log(arc(d));
                          return arc(d);
                        });
                      arcs.append("svg:text").attr("transform", function(d){
                        d.innerRadius = 0;
                        d.outerRadius = r;
                        return "translate(" + arc.centroid(d) + ")";});

                      var legend = d3.select("#chart2").append("svg")
                        .attr("class", "legend")
                        .attr("width", r * 2)
                        .attr("height", r * 2)
                        .selectAll("g")
                        .data(color.domain().slice())
                        .enter().append("g")
                        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

                      legend.append("rect")
                        .attr("width", 18)
                        .attr("height", 18)
                        .style("fill", color);

                      legend.append("text")
                        .attr("x", 24)
                        .attr("y", 9)
                        .attr("dy", ".35em")
                        .style("font-family","Calibri")
                        .text(function( d,i ) {return data[i].label +": " + data[i].value })
                        .style("font-size","px");
                    </script>
                  %br
          .col-md-6
            .panel.panel-default
              .panel-heading
                %b Analysis Details
              .panel-body
                %table{class: 'table'}
                  - if params[:hashfile_id].nil?
                    %td
                      %b All Hashfiles
                    %td
                  -else
                    %td
                      %b #{@hashfiles[:name]}
                  %tr
                    %td Total Hashes:
                    %td #{@total_accounts}
                  %tr
                    %td Total Unique Users:
                    %td #{@total_unique_users_count}
                  %tr
                    %td Total Unique Passwords:
                    %td #{@total_unique_originalhash_count}
                  %tr
                    %td Total Run Time:
                    - if @total_run_time and @total_run_time > 86400
                      %td #{(@total_run_time.to_f/86400).round(2)} Days
                    - elsif @total_run_time and @total_run_time > 3600
                      %td #{(@total_run_time.to_f/3600).round(2)} Hours
                    - elsif @total_run_time and @total_run_time > 60
                      %td #{(@total_run_time.to_f/60).round(2)} Minutes
                    - elsif @total_run_time and @total_run_time >= 0
                      %td #{@total_run_time.to_f.round(2)} Seconds
                    - else
                      %td Im ready coach, just send me in.
                  %tr
                    %td
                      %b Download
                    %td
                      - if @customer_id.nil?
                        %a.btn.btn-success.pull-left{href: '/download?graph=3&type=cracked'}
                          Cracked
                        &nbsp; 
                        %a.btn.btn-danger.pull-center{href: '/download?graph=3&type=uncracked'}
                          Uncracked 
                      - elsif @customer_id && @hashfile_id.nil?
                        %a.btn.btn-success.pull-left{href: "/download?graph=3&type=cracked&customer_id=#{@customer_id}"}
                          Cracked
                        &nbsp;
                        %a.btn.btn-danger.pull-center{href: "/download?graph=3&type=uncracked&customer_id=#{@customer_id}"}
                          Uncracked 
                      - elsif @customer_id && @hashfile_id
                        %a.btn.btn-success.pull-left{href: "/download?graph=3&type=cracked&customer_id=#{@customer_id}&hashfile_id=#{@hashfile_id}"}
                          Cracked
                        &nbsp;
                        %a.btn.btn-danger.pull-center{href: "/download?graph=3&type=uncracked&customer_id=#{@customer_id}&hashfile_id=#{@hashfile_id}"}
                          Uncracked 
          .col-md-6
            .panel.panel-default
              .panel-heading
                %b Composition Details
              .panel-body
                %table{class: 'table'}
                  %td
                    %b Mask
                  %td
                  %tr
                  - @top_5_masks.each do |key, value|
                    %td #{key}
                    %td #{value.to_f.round(1)} %
                    %tr
          .col-md-12
            .panel.panel-default
              .panel-heading
                %b Password Count by Length
              .panel-body
                %div{id: 'chart3'}
                :plain
                  <script src= '/js/d3.min.js'></script>
                  <script type= "text/javascript">
                  // set the dimensions and margins of the graph
                  var margin = {top: 20, right: 20, bottom: 30, left: 40},
                      width = document.getElementById('chart3').clientWidth * .90;
                      height = 350 - margin.top - margin.bottom;

                  // set the ranges
                  var x = d3.scaleBand()
                            .range([0, width])
                            .padding(0.1);
                  var y = d3.scaleLinear()
                            .range([height, 0]);

                  // append the svg object to the body of the page
                  // append a 'group' element to 'svg'
                  // moves the 'group' element to the top left margin
                  var visual2 = d3.select("#chart3").append("svg")
                      .attr("width", width + margin.left + margin.right)
                      .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                      .attr("transform",
                            "translate(" + margin.left + "," + margin.top + ")");

                  // get the data
                  var url = '/analytics/graph1?customer_id=#{@customer_id}&hashfile_id=#{@hashfile_id}';
                  d3.json(url, function(error, data) {
                    if (error) throw error;
                    console.log(data)

                    // format the data
                    data.forEach(function(d) {
                      d.length = +d.length;
                    });

                    // Scale the range of the data in the domains
                    x.domain(data.map(function(d) { return d.length; }));
                    y.domain([0, d3.max(data, function(d) { return d.count; })]);

                    // append the rectangles for the bar chart
                    visual2.selectAll("#chart3")
                        .data(data)
                      .enter().append("rect")
                        .attr("class", "bar")
                        .attr("x", function(d) { return x(d.length); })
                        .attr("width", x.bandwidth())
                        .attr("y", function(d) { return y(d.count); })
                        .attr("height", function(d) { return height - y(d.count); })
                        .attr("fill", "#337ab7");

                    // add the x Axis
                    visual2.append("g")
                        .attr("transform", "translate(0," + height + ")")
                        .call(d3.axisBottom(x));

                    // add the y Axis
                    visual2.append("g")
                        .call(d3.axisLeft(y));
                  });
                  </script>
          .col-md-12
            .panel.panel-default
              .panel-heading
                %b Top 10 Passwords
              .panel-body
                %div{id: 'chart4'}
                :plain
                  <script src= '/js/d3.min.js'></script>
                  <script type= "text/javascript">
                  // set the dimensions and margins of the graph
                  var margin = {top: 20, right: 20, bottom: 30, left: 40},
                      width = document.getElementById('chart4').clientWidth * .90;
                      height = 350 - margin.top - margin.bottom;

                  // set the ranges
                  var x = d3.scaleBand()
                            .range([0, width])
                            .padding(0.1);
                  var y = d3.scaleLinear()
                            .range([height, 0]);

                  // append the svg object to the body of the page
                  // append a 'group' element to 'svg'
                  // moves the 'group' element to the top left margin
                  var visual3 = d3.select("#chart4").append("svg")
                      .attr("width", width + margin.left + margin.right)
                      .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                      .attr("transform",
                            "translate(" + margin.left + "," + margin.top + ")");

                  // get the data
                  var url = '/analytics/graph2?customer_id=#{@customer_id}&hashfile_id=#{@hashfile_id}';
                  d3.json(url, function(error, data) {
                    if (error) throw error;
                    console.log(data)

                    // format the data
                    data.forEach(function(d) {
                      d.count = +d.count;
                    });

                    // Scale the range of the data in the domains
                    x.domain(data.map(function(d) { return d.password; }));
                    y.domain([0, d3.max(data, function(d) { return d.count; })]);

                    // append the rectangles for the bar chart
                    visual3.selectAll("#chart4")
                        .data(data)
                      .enter().append("rect")
                        .attr("class", "bar")
                        .attr("x", function(d) { return x(d.password); })
                        .attr("width", x.bandwidth())
                        .attr("y", function(d) { return y(d.count); })
                        .attr("height", function(d) { return height - y(d.count); })
                        .attr("fill", "#337ab7");

                    // add the x Axis
                    visual3.append("g")
                        .attr("transform", "translate(0," + height + ")")
                        .call(d3.axisBottom(x));

                    // add the y Axis
                    visual3.append("g")
                        .call(d3.axisLeft(y));
                  });
                  </script>
          .col-md-12
            .panel.panel-default
              .panel-heading
                %b Top 10 Base Words
              .panel-body
                %div{id: 'chart5'}
                :plain
                  <script src= '/js/d3.min.js'></script>
                  <script type= "text/javascript">
                  // set the dimensions and margins of the graph
                  var margin = {top: 20, right: 20, bottom: 30, left: 40},
                      width = document.getElementById('chart5').clientWidth * .90;
                      height = 350 - margin.top - margin.bottom;

                  // set the ranges
                  var x = d3.scaleBand()
                            .range([0, width])
                            .padding(0.1);
                  var y = d3.scaleLinear()
                            .range([height, 0]);

                  // append the svg object to the body of the page
                  // append a 'group' element to 'svg'
                  // moves the 'group' element to the top left margin
                  var visual4 = d3.select("#chart5").append("svg")
                      .attr("width", width + margin.left + margin.right)
                      .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                      .attr("transform",
                            "translate(" + margin.left + "," + margin.top + ")");

                  // get the data
                  var url = '/analytics/graph3?customer_id=#{@customer_id}&hashfile_id=#{@hashfile_id}';
                  d3.json(url, function(error, data) {
                    if (error) throw error;
                    console.log(data)

                    // format the data
                    data.forEach(function(d) {
                      d.count = +d.count;
                    });

                    // Scale the range of the data in the domains
                    x.domain(data.map(function(d) { return d.password; }));
                    y.domain([0, d3.max(data, function(d) { return d.count; })]);

                    // append the rectangles for the bar chart
                    visual4.selectAll("#chart5")
                        .data(data)
                      .enter().append("rect")
                        .attr("class", "bar")
                        .attr("x", function(d) { return x(d.password); })
                        .attr("width", x.bandwidth())
                        .attr("y", function(d) { return y(d.count); })
                        .attr("height", function(d) { return height - y(d.count); })
                        .attr("fill", "#337ab7");

                    // add the x Axis
                    visual4.append("g")
                        .attr("transform", "translate(0," + height + ")")
                        .call(d3.axisBottom(x));

                    // add the y Axis
                    visual4.append("g")
                        .call(d3.axisLeft(y));
                  });
                  </script>
          .col-md-12
            .panel.panel-default
              .panel-heading
                %b Accounts With Weak Passwords
                .span.badge.pull-right
                  %a.pull-right{href: "/download?graph=6&type=csv&customer_id=#{@customer_id}&hashfile_id=#{@hashfile_id}"}
                    csv
              .panel-body
                - if @fails_complexity
                  - if @fails_complexity.empty?
                    No Weak Passwords!
                  - else
                    #accordion.panel-group
                      .panel.panel-default
                        .panel-heading
                          %a{"data-parent" => "#accordion", "data-toggle" => 'collapse', href: "#collaps-weak-accounts" }
                            Expand
                          .span.badge.pull-right #{@fails_complexity.size}
                        %div{id: "collaps-weak-accounts", class: "panel-collapse collapse"}
                          .panel-body
                            %table{class: 'table'}
                              %td
                                %b Username
                              %td
                                %b Password
                              %tr
                              - @fails_complexity.each do |key, value|
                                %td #{key}
                                %td #{value}
                                %tr
          - if @customer_id && @hashfile_id
            .col-md-12
              .panel.panel-default
                .panel-heading
                  %b Top 20 Passwords/Hashes Shared by Users
                .panel-body
                  - if @password_users
                    - if @password_users.empty?
                      No passwords are shared by users!
                    - else
                      #accordion.panel-group
                        .panel.panel-default
                          - @password_users.each do |pass, users|
                            - link = rand(36**8).to_s(36)
                            .panel-heading
                              %a{"data-parent" => "#accordion", "data-toggle" => "collapse", href: "#collapse-#{link}" }
                                #{pass}
                              .span.badge.pull-right #{@password_users[pass].length}
                            %div{id: "collapse-#{link}", class: "panel-collapse collapse"}
                              .panel-body
                                %ul{:class =>"list-group borderless row"}
                                  - users.each do |user|
                                    %li{class: "list-group-item borderless col-xs-4"}
                                      #{user}
